@use '@scss/common.scss' as *;

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--theme-border-color);
  gap: 0.5rem;

  h5 {
    margin: 0;
  }

  @include mid-break {
    border-top: 1px solid var(--theme-border-color);
    border-left: 1px solid var(--theme-border-color);
    border-right: 1px solid var(--theme-border-color);
  }
}

.select {
  appearance: none;
  width: 100%;
  border: none;
  font-size: 1rem;
  @include small;

  & {
    font-family: var(--font-body);
    margin: 0;
    color: var(--theme-elevation-1000);
    background-color: transparent;
    position: relative;
    padding: 1rem;
  }

  &:focus {
    outline: none;
  }

  &:hover {
    color: var(--theme-elevation-800);
    cursor: pointer;
  }

  option {
    line-height: 2rem;
  }
}

.icon {
  position: absolute;
  height: 1rem;
  right: 1rem;
  bottom: 0;
  transform: translateY(-1rem);
  display: block;
  pointer-events: none;
}
